
import { fetchAvatarUrl } from './utils';

const layout = {
  avatar : {
    fullWidth : 64,
    clipHeight : 36,
    slope : 0.3,
  },
  tag : {
    colors : ['#49B3E0']
  },
  message : {
    padding : 8
  }
};


/**
 * 绘画
 */

class Panel {
  /** @type {HTMLCanvasElement} */
  top = null;
  /** @type {Message[]} */
  msgs = [];

  constructor(param) {
    this.zrender = param.zrender;
    this.zr = param.zr;
    this.danmaku = param.danmaku;
    this.top = param.top;
    this.context = param.context;
  }

  onDanmuReceived(danmu) {
    var m = new Message(danmu, {
      zrender : this.zrender,
      zr : this.zr,
      top : this.top,
      context : this.context,
      danmaku : this.danmaku
    });
    if (this.msgs.length) {
      var lastM = this.msgs[this.msgs.length - 1];
      var nextY = lastM.y + lastM.height + layout.message.padding;
      m.draw(nextY);
      this.msgs.push(m);

      if (nextY + m.height > this.top.offsetHeight - 10) {
        const offy = nextY + m.height - (this.top.offsetHeight - 10);
        var clearIdx = -1;
        for (var i = 0; i < this.msgs.length; i++) {
          var mm = this.msgs[i];
          var yy = mm.y - offy;
          if (yy < 10) {
            clearIdx = i;
            mm.destroy();
          } else {
            mm.move(yy);
          }
        }
        
        if (clearIdx >= 0) {
          this.msgs.splice(0, clearIdx + 1);
        }
      }
    } else {
      m.draw(10);
      this.msgs.push(m);
    }
  }

  onEnterReceived(enter) {
    console.log(enter);
  }
}

class Message {
  /** @type {HTMLCanvasElement} */
  top = null;

  spAvatar = null;
  spAvatarClip = null;

  spName = null;
  spNameBg = null;
  spText = null;
  spText2 = null; // 如果一行摆不下的话

  spTest = null;
  height = 0;
  y = 0;

  constructor(danmu, param) {
    this.danmu = danmu;
    
    this.zrender = param.zrender;
    this.zr = param.zr;
    this.danmaku = param.danmaku;
    this.top = param.top;
    this.context = param.context;
  }

  /** @param {number} startY */
  draw(startY) {
    this.y = startY;

    const {zrender, zr, danmu} = this;
    const aw = layout.avatar.fullWidth, ch = layout.avatar.clipHeight, slope = layout.avatar.slope;
    const xx = 15, yy = startY - (aw/2 - ch/2), dx = ch * slope;
    const maxw = this.top.offsetWidth;

    // 头像部分
    this.spAvatar = new zrender.Image({
      style : {x : xx, y : yy, width : 64, height : 64, image : fetchAvatarUrl(danmu.uId)}
    });
    this.spAvatarClip = new zrender.Polyline({
      shape : {
        points : [[xx + dx, yy + aw/2 - ch/2], [xx + aw, yy + aw/2 - ch/2], [xx + aw - dx, yy + aw/2 + ch/2], [xx, yy + aw/2 + ch/2]]
      }
    });
    this.spAvatar.setClipPath(this.spAvatarClip);
    zr.add(this.spAvatar);

    // 名字条部分
    this.spName = new zrender.Text({
      style : {
        text : this.danmu.uName,
        textVerticalAlign: 'bottom',
        fontSize: 18,
        fontFamily: 'Microsoft YaHei UI',
        textFill: '#FFF',
        blend: 'destination-out'
      },
      position: [ xx + aw + 5, startY + ch - 4 ],
      z: 10
    });
    var nw = this.spName.getBoundingRect().width;

    this.spNameBg = new zrender.Polyline({
      shape : {
        points : [
          [xx + aw - 5, startY + ch], // 左下
          [xx + aw + nw + 5, startY + ch], // 右下
          [xx + aw + nw + 35, startY + ch/5],
          [xx + aw - 5 + ch * 0.8 * slope, startY + ch/5],
          [xx + aw - 5, startY + ch] // 左下
        ]
      },
      style : {
        fill: layout.tag.colors[0],
        lineWidth: 0,
      },
    });
    zr.add(this.spNameBg); // getBoundingRect
    zr.add(this.spName);

    // 消息部分
    var offx = xx + aw + nw + 40;
    this.spText = new zrender.Text({
      style : {
        text : this.danmu.text,
        fontWeight: 'bold',
        textVerticalAlign: 'bottom',
        fontSize: 20,
        fontFamily: 'Microsoft YaHei UI',
        textFill: '#FFF',
        textShadowColor: '#000',
        textShadowBlur: 5
      },
      position: [ offx, startY + ch ],
      z: -10
    });
    // console.log(this.spText.getBoundingRect().width + offx);
    if (offx + this.spText.getBoundingRect().width > maxw) {
      console.log("太多了, 吃不下了");
    }
    this.height = ch;

    zr.add(this.spText);



    // this.spTest = new zrender.Polyline({
    //   shape : {
    //     points : [[0, 0], [0, 215], [500, 215], [500, 0]]
    //   },
    //   style : {
    //     fill : '#0000',
    //     stroke : '#B22',
    //     lineWidth : 2
    //   }
    // });
    // zr.add(this.spTest);
  }

  /** @param {number} startY */
  move(startY) {
    this.y = startY;

    const aw = layout.avatar.fullWidth, ch = layout.avatar.clipHeight, slope = layout.avatar.slope;
    const xx = 15, yy = startY - (aw/2 - ch/2), dx = ch * slope;

    this.spAvatar.attr({style : {y : yy}});
    this.spAvatarClip.attr({shape : {points : [[xx + dx, yy + aw/2 - ch/2], [xx + aw, yy + aw/2 - ch/2], [xx + aw - dx, yy + aw/2 + ch/2], [xx, yy + aw/2 + ch/2]]}});

    var nw = this.spName.getBoundingRect().width;
    this.spName.attr({ position: [ xx + aw + 5, startY + ch - 4 ] });
    this.spNameBg.attr({
      shape : {
        points : [
          [xx + aw - 5, startY + ch], // 左下
          [xx + aw + nw + 5, startY + ch], // 右下
          [xx + aw + nw + 35, startY + ch/5],
          [xx + aw - 5 + ch * 0.8 * slope, startY + ch/5],
          [xx + aw - 5, startY + ch] // 左下
        ]
      }
    });

    this.spText.attr({position: [ xx + aw + nw + 40, startY + ch ]});
  }

  destroy() {
    const { zr } = this;

    zr.remove(this.spAvatar);
    zr.remove(this.spAvatarClip);
    zr.remove(this.spName);
    zr.remove(this.spNameBg);
    zr.remove(this.spText);
    if (this.spText2 != null) {
      zr.remove(this.spText2);
    }
  }
}

export default Panel;
